import React from "react";
import {connect} from "react-redux";
import {fetchPosts, reset} from "../../actions";
import DatePicker from "react-mobile-datepicker";
import cookie from "react-cookie";
import ShopName from "../../components/ShopName";
class selectDate extends React.Component {
    constructor(props) {
        super(props);
        let curDate = new Date();
        let curYear = curDate.getFullYear();
        let curMonth = curDate.getMonth() + 1;
        let curDay = curDate.getDate();
        this.state = {
            isLoading: true,
            shopNo: 0,
            shoppingNames: [],
            time: curDate,
            isOpen: false,
            startYear: curYear,
            startMonth: curMonth,
            startDay: curDay,
            endYear: curYear,
            endMonth: curMonth,
            endDay: curDay,
            isClickStartDate: true,
            dateType: 0,
            confirmDateClass: ""
        };
    }

    componentWillMount() {
        document.title = "选择时间";
    }

    componentDidMount() {
        let queryDate = cookie.load("queryDate");
        //alert("111111111111111:" + queryDate);
        if (queryDate) {
            let {startYear, startMonth, startDay, endYear, endMonth, endDay} = queryDate;
            this.setState({
                startYear: startYear,
                startMonth: startMonth,
                startDay: startDay,
                endYear: endYear,
                endMonth: endMonth,
                endDay: endDay,
                dateType: cookie.load("queryDateType")
            });
        }
        let shopNo = this.props.location.query.shopNo;
        if (shopNo) {
            this.setState({
                shopNo: shopNo
            });
        }
        const header = {"X-Client-ID": "123456"};
        this.props.dispatch(reset("getShopListByOpenId"));
        this.props.dispatch(fetchPosts("getShopListByOpenId", header, {openId: cookie.load("openId")}));
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.ShopList.errorCode === 0) {
            this.setState({
                isLoading: false
            });
            let shopList = nextProps.ShopList.data.shopInfoForStaffVos;
            if (shopList.length > 0) {
                this.setState({
                    shoppingNames: shopList
                });
            }
        }
    }

    render() {
        if (this.state.isLoading) {
            return (
                <div className="loading"><span>Loading</span></div>
            );
        } else {
            return (
                <div className="marginTop20">
                    <ShopName shopNames={this.state.shoppingNames}
                              shopNo={this.state.shopNo}
                              fetchDataByShopId={this.fetchDataByShopId.bind(this)}
                    />
                    <div className="select-date-header-container">
                        <div className={this.state.dateType == 0 ? "curr" : ""}
                             onClick={this.dateTypeHandle.bind(this, 0)}>今天
                        </div>
                        <div className={this.state.dateType == 1 ? "curr" : ""}
                             onClick={this.dateTypeHandle.bind(this, 1)}>本周
                        </div>
                        <div className={this.state.dateType == 2 ? "curr" : ""}
                             onClick={this.dateTypeHandle.bind(this, 2)}>本月
                        </div>
                    </div>
                    <div className="select-date-start-date">开始时间</div>
                    <div onClick={this.handleStartDateClick.bind(this)}>
                        <div className="select-date-query-date-container">
                            <div>{this.state.startYear}</div>
                            <div>{this.state.startMonth}</div>
                            <div>{this.state.startDay}</div>
                        </div>
                        <hr/>
                    </div>
                    <div className="select-date-middle-line"></div>
                    <div className="select-date-end-date">结束时间</div>
                    <div onClick={this.handleEndDateClick.bind(this)}>
                        <div className="select-date-query-date-container">
                            <div>{this.state.endYear}</div>
                            <div>{this.state.endMonth}</div>
                            <div>{this.state.endDay}</div>
                        </div>
                        <hr/>
                    </div>
                    <div onClick={this.confirmQueryDate.bind(this)} className="select-date-confirm-container">
                        <button className={this.state.confirmDateClass}>确定</button>
                    </div>
                    <DatePicker
                        value={this.state.time}
                        isOpen={this.state.isOpen}
                        onSelect={this.handleSelect.bind(this)}
                        onCancel={this.handleCancel.bind(this)}/>
                </div>
            );
        }
    }

    fetchDataByShopId(shopNo) {
        this.setState({
            shopNo: shopNo
        });
        this.props.dispatch(reset("queryCondition"));
    }

    handleStartDateClick() {
        let initDate = new Date(this.state.startYear, (this.state.startMonth - 1), this.state.startDay);
        this.setState({isOpen: true, isClickStartDate: true, time: initDate});
    }

    handleEndDateClick() {
        let initDate = new Date(this.state.endYear, (this.state.endMonth - 1), this.state.endDay);
        this.setState({isOpen: true, isClickStartDate: false, time: initDate});
    }

    handleCancel() {
        this.setState({isOpen: false});
    }

    handleSelect(time) {
        this.setState({time, isOpen: false});
        let selYear = time.getFullYear();
        let selMonth = time.getMonth() + 1;
        let selDay = time.getDate();
        if (this.state.isClickStartDate) {
            this.setState({
                startYear: selYear,
                startMonth: selMonth,
                startDay: selDay
            });
        } else {
            this.setState({
                endYear: selYear,
                endMonth: selMonth,
                endDay: selDay
            });
        }
        if (this.state.dateType != 3) {
            this.setState({
                dateType: 3
            });
        }
    };

    dateTypeHandle(dateType) {
        //alert("type:" + dateType);
        this.setState({
            dateType: dateType
        });
        switch (dateType) {
            case 0:
                this.setToday();
                break;
            case 1:
                this.setThisWeak();
                break;
            case 2:
                this.setThisMonth();
                break;
            default:
                this.setToday();
                break;
        }
        this.props.dispatch(reset("queryCondition"));
    }

    setToday() {
        let curDate = new Date();
        let curYear = curDate.getFullYear();
        let curMonth = curDate.getMonth() + 1;
        let curDay = curDate.getDate();
        this.setState({
            startYear: curYear,
            startMonth: curMonth,
            startDay: curDay,
            endYear: curYear,
            endMonth: curMonth,
            endDay: curDay
        })
    }

    setThisWeak() {
        let date = new Date();
        let endYear = date.getFullYear();
        let endMonth = date.getMonth() + 1;
        let endDay = date.getDate();
        //alert("星期几：" + date.getDay() + endYear + ";" + endMonth + ";" + endDay
        date.setDate(date.getDate() - (date.getDay() == 0 ? 7 : date.getDay()) + 1);
        //alert("几号：" + date.getDate() + ";" + (date.getMonth() + 1) + ";" + date.getFullYear());
        let startYear = date.getFullYear();
        let startMonth = date.getMonth() + 1;
        let startDay = date.getDate();
        this.setState({
            startYear: startYear,
            startMonth: startMonth,
            startDay: startDay,
            endYear: endYear,
            endMonth: endMonth,
            endDay: endDay
        })
    }

    setThisMonth() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        this.setState({
            startYear: year,
            startMonth: month,
            startDay: 1,
            endYear: year,
            endMonth: month,
            endDay: day
        })
    }

    confirmQueryDate() {
        let startDate = new Date(this.state.startYear, this.state.startMonth, this.state.startDay);
        let endDate = new Date(this.state.endYear, this.state.endMonth, this.state.endDay);
        if (startDate > endDate) {
            alert("开始时间不可以大于结束时间");
        } else if ((endDate - startDate) / 86400000 > 30) {
            alert("查询时间不可以超过31天");
        } else {
            this.setState({
                confirmDateClass: "clicked"
            });
            let queryDate = {
                startYear: this.state.startYear,
                startMonth: this.state.startMonth,
                startDay: this.state.startDay,
                endYear: this.state.endYear,
                endMonth: this.state.endMonth,
                endDay: this.state.endDay
            };
            cookie.save("queryDate", queryDate);
            cookie.save("queryDateType", this.state.dateType);
            window.location.href = "/#/pay/queryExportOrders?shopNo=" + this.state.shopNo;
        }
    }
}

function mapStateToProps(state) {
    const {postsByApi} = state;
    const {
        isFetching,
        items: ShopList
    } = postsByApi["getShopListByOpenId"] || {
        isFetching: false,
        items: {}
    };
    const {
        items: DateTyp
    } = postsByApi["queryCondition"] || {
        items: {}
    };
    return {
        isFetching,
        DateTyp,
        ShopList
    }
}

export default  connect(mapStateToProps)(selectDate);